<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html body div ul li p span img {}
        div p img {}
        .a{}
        #b{}


        /* 

            id 性能最高   找到一个之后不会向下继续查找
            class   具有重复性    找完页面所有的这个类名
            后代选择器   img  p   div   从右往左查找
        
        */


    </style>
</head>
<body>

    <div class="box1">
        <ul>
            <li>
                <h3>
                    <img src="" alt="">
                </h3>
                <p>
                    <span>
                        <img id="b" class="a" src="" alt="">
                    </span>
                </p>
            </li>
        </ul>
    </div>

    <img src="" alt="" class="a">

    <script>

        // 1 js数据类型和判断方式
        //    基本数据类型  5种 
        //    引用数据类型   function  array   object
        //    判断方法
        //       基本数据类型和function   typeof   
        //       array和object   instanceof


        // 2 回流和重绘
        //    重绘：样式的改变不影响结构的时候  color , background-color:
        //    回流：位置的改变

        //    回流的代价更高
        //    回流必引发重绘，重绘不一定引发回流

        //   如何优化
        //      在实现动画的时候，尽量让元素脱离文档流(使用定位)
        //      文档碎片(节点操作使用)
        //            节点操作   创建标签，插入标签
        //             字符串拼接
        //      样式做一次性的修改  --  给一个类名
        //      尽量减少  offsetLeft / clientWidth / offsetWidth


        // 3 前端性能优化
        // 


        // 4 new  


        // 5  async   await 



        // instanceof  原型链？？？

        console.log([] instanceof Array);    // true
        console.log([] instanceof Object);   // true

        console.log({} instanceof Object);
        console.log({} instanceof Array);    // false

    </script>
    
</body>
</html>